<template>
    <div class="P-cates">
        <div class="left">
            <span @click="select" :data-index="index" :class="{'act': cur==index}" v-for="(item, index) in cates" :key="item.id">{{ item.name }}</span>
        </div>
        <div class="right">
            <div class="con">
                <router-view></router-view>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data: function () {
        return {
            cur: -1,
            cates: [
                {
                    id: 1,
                    name: "美妆",
                },
                {
                    id: 2,
                    name: "女装",
                },
                {
                    id: 3,
                    name: "男装",
                },
                {
                    id: 4,
                    name: "童装",
                },
                {
                    id: 5,
                    name: "鞋子",
                }
            ]
        };
    },
    methods: {
        select(e){
            let {index} = e.target.dataset;
            if(this.cur===index) return;
            this.cur = index;
            console.log(this.cur);
            this.$router.push(`/cates/${this.cur}`);
        }
    }
};
</script>

<style lang="less">
// less 的引入路径中带上 ~@ 就代表根目录了，aixy会自动解析的，有点坑啊，为什么没有和小程序统一标准？
@import "@/components/common/var.less";

.P-cates {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: stretch;
    .left {
        width: 200px;
        border-right: 1px solid @borderColor;
        span {
            display: block;
            text-align: center;
            line-height: 90px;
            border-bottom: 1px solid @borderColor;
            font-size: 28px;
            &.act{
                color: @btnColor;
            }
        }
    }
    .right {
        flex: 1;
    }
}
</style>